<template>
  <div>
 <div>
      <el-form
        ref="form"
        :model="queryParams"
        inline=true
        label-width="80px"
        class="demo-form-inline"
      >
        <el-form-item label="产品名称:">
          <el-input
            v-model="queryParams.paname"
            placeholder="输入名称"
          ></el-input>
        </el-form-item>

              <el-form-item label="还款方式">
    <el-select v-model="queryParams.payment" clearable placeholder="还款方式">
    <el-option
      v-for="item in queryParams"
      :key="item.value"
      :label="item.name"
      :value="item.payment">
    </el-option>
  </el-select>
  </el-form-item>

   <el-form-item label="启用状态">
    <el-select v-model="queryParams.eid" clearable placeholder="启用状态">
    <el-option
      v-for="item in queryParams"
      :key="item.value"
      :label="item.ename"
      :value="item.eid">
    </el-option>
  </el-select>
  </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>


       <div>
      <el-table :data="pageBean.beanList" style="width: 100%">
        <el-table-column prop="pid"   label="编号" width="300"/>

        <el-table-column prop="paname" label="产品名称" width="200" />

       <el-table-column   prop="repayment.name" label="还款方式" width="200"/>

        <el-table-column prop="enablestatus.ename" label="启用状态" width="200" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
             
              >查看</el-button
            >
   
    <el-button
              size="mini"
              @click="handleEditr(scope.$index, scope.row)"
              icon="el-icon-edit"
             
              >编辑</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
           
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBean.pageIndex"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
   
    </div>
     <!-- 模态框 -->
<div>
  
<!-- 模态框 -->
    <el-dialog title="" :visible.sync="dialogFormVisible" >
      <!-- 加入自己的表单  inline="true"-->
<el-form ref="storeForm"   :rules="rules"  :model="storeForm">
     <el-form-item label="产品编号: " prop="pid">
          <!-- <el-input v-model="storeForm.pid"></el-input> -->
           {{storeForm.pid}} 
        </el-form-item>
        
       <el-form-item label="产品名称: " prop="paname">
         {{storeForm.paname}}
          <!-- <el-input v-model="storeForm.paname"></el-input> -->
        </el-form-item>


        <el-form-item label="还款方式" prop="repayment.name">
          {{storeForm.repayment.name}}
           <!-- <el-input v-model="storeForm.repayment.name"></el-input> -->
        </el-form-item> 

        <el-form-item label="产品介绍" prop="repayment.introduce">
          {{storeForm.introduce}}
          <!-- <el-input v-model="storeForm.introduce"></el-input> -->
        </el-form-item> 

        <el-form-item label="启用状态" prop="enablestatus.ename">
          {{storeForm.enablestatus.ename}}
          <!-- <el-input v-model="storeForm.enablestatus.ename"></el-input> -->
        </el-form-item>

        <el-form-item label="期数" prop="rate.issue">
          {{storeForm.rate.issue}}
          <!-- <el-input v-model="storeForm.rate.issue"></el-input> -->
        </el-form-item>

        <el-form-item label="月利率" prop="rate.monthrate">
          {{storeForm.rate.monthrate}}
        </el-form-item>
        </el-form>
<div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
      
    </el-dialog>
</div>


<div>
  
<!-- 模态框 2修改使用-->
    <el-dialog title="" :visible.sync="dialogFormVisible2" >
<el-form ref="storeForm2"   :rules="rules"  :model="storeForm2">
      <el-form-item label="产品编号: " prop="pid">
          <el-input v-model="storeForm2.pid"></el-input>
        </el-form-item>

       <el-form-item label="产品名称: " prop="paname">
          <el-input v-model="storeForm2.paname"></el-input>
        </el-form-item>

        <el-form-item label="产品介绍" prop="repayment.introduce">
          <el-input v-model="storeForm2.introduce"></el-input>
        </el-form-item> 

        </el-form>
 <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="modefyStore('storeForm2')"
          >确 定</el-button
        >
      </div>
      
    </el-dialog>
</div>
        
  </div>
</template>

<script>


export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalPage: 0,
      },
      //查询条件
      queryParams: {
        paname: "",
        uid: "",
        payment: "",
        eid: ""
      },
        storeForm:{
          pid: "",
           paname: "",
          uoccupation: "",
          ugender: "",
          repayment:"",
          enablestatus:"",
          rate:"",
          uaddress: "",
          udata: "",
          uimage: "",
          ulongitude: "",
        },
        storeForm2:{
          pid: "",
          paname: "",
          introduce: "",
        },
  rules: {
          paname: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        },
      dialogFormVisible: false,
       dialogFormVisible2: false,
    };
  },
  //   使用生命周期方法在页面加载完成后显示数据
  created() {
    this.getProductsALL();
    this.getRepaymentAll();
    this.getEnablestatusAll();
  },
  methods: {
    handleEdit(index, row) {
       //展示模态框
      this.dialogFormVisible=true;
      //属性赋值 回显在模态框中
      this.storeForm={...row};
      console.log(index, row);

    },
    handleEditr(index, row){
       //展示模态框
      this.dialogFormVisible2=true;
      //属性赋值 回显在模态框中
      this.storeForm2={...row};
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.pid)
      if(confirm("此操作将永久删除, 是否继续?")){
//调用删除方法    
        this.$axios.delete("http://localhost:8601//products/deleteProductos/"+row.pid,
        )
        .then(resp => {
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          console.log(resp);
          this.getProductsALL();
        });
      }else{
        this.$message({
            type: 'info',
            message: '已取消删除'
          });       
      }


    },
    getProductsALL() {
      this.$axios
        .get("http://127.0.0.1:8601/products/selectAllByPage", {
          params: {
            paname: this.queryParams.paname,
            payment: this.queryParams.payment,
            eid: this.queryParams.eid,
            // uid: this.queryParams.uid,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.pageBean = resp.data.data;
          console.log(resp);
        });
    },
    onSubmit() {

this.getProductsALL();


    },
    getRepaymentAll(){
        this.$axios.get("http://localhost:8601/products/allRepayment").then(resp=>{
          this.queryParams=resp.data;
          console.log(resp);
        });
},
//查询启用状态表单中的所有信息 名称展示到下拉框
getEnablestatusAll(){
        this.$axios.get("http://localhost:8601/products/all").then(resp=>{
          this.queryParams=resp.data;
          console.log(resp);
        });
},

modefyStore(storeForm2){
 
       this.$refs[storeForm2].validate((valid) => {
         console.log(this.storeForm2)
          if (valid) {
           
            //验证成功调用后端修改方法
      this.$axios.put("http://localhost:8601/products/uptate",this.storeForm2         
        )
        .then((resp) => {
           alert('验证成功!');

           console.log(this.storeForm2);
          console.log(resp);
          this.$message("修改成功！");
          //修改成功后关闭模态框
this.dialogFormVisible2=false
          //再次刷新页面
          this.getProductsALL();
        });
          } else {
             this.$message({
          message: '格式错误',
          type: 'success'
        });
            console.log('error submit!!');
            return false;
          }
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getUserinfoALL();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getUserinfoALL();
    },
  },
};
</script>

<style>

</style>